<script setup>
import api from '../api/userfosterBooking_api.js' // 对应实际的寄养预约接口路径
import loginApi from '@/api/userlogin_api.js'; // 引入登录信息接口（与布局/领养页面一致）
import router from '@/router'; // 引入路由，用于未登录跳转
import { ref, onMounted } from 'vue';
import {
  ElButton,
  ElTable,
  ElTableColumn,
  ElMessageBox,
  ElMessage,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElPagination,
  ElPopover,
  ElTag
} from 'element-plus';
import lodash from 'lodash'

// 表格数据
const tableData = ref([]);
const total = ref(0);

// 弹窗控制
const editWinVisible = ref(false);
const addWinVisible = ref(false);

// 查询条件（新增当前登录用户名筛选）
const searchObj = ref({
  current: 1,
  limit: 10,
  foster_booking_user_name: '', // 寄养人姓名（关联当前登录用户）
  foster_booking_date: '',
  foster_booking_pet: ''
});

// 表单数据（自动填充当前登录用户名）
const editObj = ref({});
const addObj = ref({
  foster_booking_user_name: '', // 寄养人姓名（关联当前登录用户）
  foster_booking_date: '',
  foster_booking_pet: ''
});

// 登录用户信息（与领养页面一致，初始为空）
const loginAdmin = ref({});

// 页面初始化：先校验登录状态，再加载当前用户寄养预约数据
onMounted(async () => {
  // 1. 校验登录状态（复用领养页面逻辑）
  const isLogin = await checkLogin();
  if (!isLogin) return; // 未登录则终止后续操作

  // 2. 登录成功：预设当前用户名到查询条件和新增表单
  searchObj.value.foster_booking_user_name = loginAdmin.value.user_name;
  addObj.value.foster_booking_user_name = loginAdmin.value.user_name;

  // 3. 加载当前用户的寄养预约数据
  await search();
});

// 校验登录状态（完全复用领养页面逻辑，与布局页面对齐）
const checkLogin = async () => {
  // 第一步：检查 token 是否存在（核心登录标识）
  const token = localStorage.getItem("token");
  if (!token) {
    ElMessage.warning('请先登录');
    router.push("/userlogin"); // 无 token 跳转登录页
    return false;
  }

  // 第二步：调用接口获取用户信息（含 user_name）
  try {
    const res = await loginApi.logininfo(); // 与布局/领养页面一致的接口
    loginAdmin.value = res; // 赋值用户信息（关键：获取 user_name）
    return true; // 登录成功
  } catch (error) {
    // 接口失败（如 token 过期）：清除 token 并跳转登录
    ElMessage.error('登录状态失效，请重新登录');
    localStorage.removeItem("token");
    router.push("/userlogin");
    return false;
  }
};

// 获取表格数据（携带当前登录用户名筛选，仅查自己的预约）
const search = async () => {
  try {
    const result = await api.page(searchObj.value);
    tableData.value = result.data;
    total.value = result.count;
  } catch (error) {
    ElMessage.error('获取寄养预约记录失败');
    console.error(error);
  }
};

// 分页处理
const handleSizeChange = (val) => {
  searchObj.value.limit = val;
  search();
};
const handleCurrentChange = (val) => {
  searchObj.value.current = val;
  search();
};

// 执行查询（重置页码为1）
const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
};

// 编辑弹窗取消
const editCancel = () => {
  editObj.value = {};
  editWinVisible.value = false;
};

// 编辑提交（保留原逻辑，自动关联当前用户）
const editCommit = async () => {
  // 强制编辑时用户名与当前登录用户一致（防止篡改）
  editObj.value.foster_booking_user_name = loginAdmin.value.user_name;
  await api.edit(editObj.value);
  search();
  editWinVisible.value = false;
  ElMessage.success('修改成功');
};

// 点击编辑按钮（克隆数据时保留用户名关联）
const handleEdit = (index, row) => {
  editObj.value = lodash.clone(row);
  // 确保编辑时用户名不可篡改（与当前登录用户一致）
  editObj.value.foster_booking_user_name = loginAdmin.value.user_name;
  editWinVisible.value = true;
};

// 删除操作（保留原逻辑）
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除这条寄养预约记录吗？',
      '删除提示',
      { type: 'error' }
  ).then(async () => {
    await api.del(row.number); // 按实际主键字段调整（如 row.id）
    search();
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

// 打开新增弹窗（校验登录状态，自动填充用户名）
const openAddDialog = () => {
  // 二次校验登录状态（防止手动刷新后状态丢失）
  if (!loginAdmin.value.user_name) {
    ElMessage.warning('请先登录');
    router.push("/userlogin");
    return;
  }
  // 自动填充当前登录用户名，且不可修改
  addObj.value = {
    foster_booking_user_name: loginAdmin.value.user_name,
    foster_booking_date: '',
    foster_booking_pet: ''
  };
  addWinVisible.value = true;
};

// 新增提交（保留原逻辑）
const addCommit = async () => {
  if (!addObj.value.foster_booking_date || !addObj.value.foster_booking_pet) {
    ElMessage.warning('请完善寄养日期和宠物信息');
    return;
  }
  ElMessageBox.confirm(
      '确定要提交这条新的寄养预约记录吗？',
      '提交提示',
      { type: 'info' }
  ).then(async () => {
    await api.add(addObj.value);
    addWinVisible.value = false;
    search();
    ElMessage.success('新增成功');
  }).catch(() => {
    ElMessage.info('已取消提交');
  });
};
</script>

<template>
  <!-- 查询表单区域（用户名输入框只读，防止手动修改） -->
  <el-form :inline="true" :model="searchObj" style="margin-top: 10px">
    <el-form-item label="寄养人姓名">
      <el-input
          v-model="searchObj.foster_booking_user_name"
          placeholder="请输入寄养人姓名"
          clearable
          readonly
      />
    </el-form-item>
    <el-form-item label="寄养日期">
      <el-date-picker
          v-model="searchObj.foster_booking_date"
          type="date"
          placeholder="选择寄养日期"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="寄养宠物">
      <el-input
          v-model="searchObj.foster_booking_pet"
          placeholder="请输入寄养宠物信息"
          clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="openAddDialog">预约请点击我</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格展示区域（仅显示当前用户的寄养预约） -->
  <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
    <el-table-column label="寄养人姓名" width="180">
      <template #default="scope">
        <el-popover trigger="hover" placement="top" width="200">
          <template #default>
            <div>寄养人姓名：{{ scope.row.foster_booking_user_name }}</div>
            <div>寄养预约的用户姓名</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.foster_booking_user_name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="寄养日期" width="180">
      <template #default="scope">
        <el-popover trigger="hover" placement="top" width="200">
          <template #default>
            <div>寄养日期：{{ scope.row.foster_booking_date }}</div>
            <div>寄养预约的日期</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.foster_booking_date }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="寄养宠物" width="200">
      <template #default="scope">
        <el-popover trigger="hover" placement="top" width="200">
          <template #default>
            <div>寄养宠物：{{ scope.row.foster_booking_pet }}</div>
            <div>寄养宠物的详细信息</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.foster_booking_pet }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="160">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[5, 10, 20]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px; text-align: right"
  />

  <!-- 编辑弹窗（用户名只读，确保与当前用户一致） -->
  <el-dialog v-model="editWinVisible" title="编辑寄养预约记录" width="400">
    <el-form :model="editObj" label-width="100px">
      <el-form-item label="寄养人姓名">
        <el-input
            v-model="editObj.foster_booking_user_name"
            readonly
        />
      </el-form-item>
      <el-form-item label="寄养日期">
        <el-date-picker
            v-model="editObj.foster_booking_date"
            type="date"
            placeholder="选择寄养日期"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="寄养宠物">
        <el-input v-model="editObj.foster_booking_pet" placeholder="填写寄养宠物信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editCancel">取消</el-button>
      <el-button type="primary" @click="editCommit">提交</el-button>
    </template>
  </el-dialog>

  <!-- 新增弹窗（用户名只读，自动填充当前登录用户） -->
  <el-dialog v-model="addWinVisible" title="新增寄养预约记录" width="400">
    <el-form :model="addObj" label-width="100px">
      <el-form-item label="寄养人姓名">
        <el-input
            v-model="addObj.foster_booking_user_name"
            placeholder="请输入寄养人姓名"
            readonly
        />
      </el-form-item>
      <el-form-item label="寄养日期">
        <el-date-picker
            v-model="addObj.foster_booking_date"
            type="date"
            placeholder="选择寄养日期"
            value-format="YYYY-MM-DD"
            :disabled-date="(time) => time < new Date()"
        />
      </el-form-item>
      <el-form-item label="寄养宠物">
        <el-input
            v-model="addObj.foster_booking_pet"
            placeholder="请填写寄养宠物信息（如品种、年龄）"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addWinVisible = false">取消</el-button>
      <el-button type="primary" @click="addCommit">提交</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 表格 hover 样式优化 */
.el-table {
  --el-table-row-hover-bg-color: #f5f7fa;
}
</style>